<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LSTM股价预测系统</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    :root {
      --bg-primary: #f5f7fa;
      --bg-secondary: #e8eef5;
      --bg-card: #ffffff;
      --text-primary: #2c3e50;
      --text-secondary: #5a6c7d;
      --border-color: #e0e6ed;
      --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.08);
      --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.1);
      --gradient-primary: linear-gradient(90deg, #2196F3, #4CAF50);
      --positive: #4CAF50;
      --negative: #f44336;
      --neutral: #FFC107;
      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    [data-theme="dark"] {
      --bg-primary: #1a2a3a;
      --bg-secondary: #0d1b2a;
      --bg-card: rgba(255, 255, 255, 0.05);
      --text-primary: #e0e0e0;
      --text-secondary: #b0b0b0;
      --border-color: rgba(255, 255, 255, 0.1);
      --shadow-sm: 0 8px 32px rgba(0, 0, 0, 0.3);
      --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Roboto', sans-serif;
    }

    body {
      background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
      color: var(--text-primary);
      min-height: 100vh;
      padding: 15px;
      transition: var(--transition);
    }

    @media (min-width: 768px) {
      body { padding: 20px; }
    }

    @media (min-width: 1024px) {
      body { padding: 30px; }
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 15px;
      animation: fadeIn 0.5s ease-in;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (min-width: 768px) {
      .container { padding: 20px; }
    }

    .header {
      text-align: center;
      margin-bottom: 25px;
      padding: 20px 15px;
      background: var(--bg-card);
      border-radius: 15px;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--border-color);
      position: relative;
      animation: slideDown 0.6s ease-out;
    }

    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (min-width: 768px) {
      .header {
        margin-bottom: 30px;
        padding: 25px 20px;
      }
    }

    .theme-toggle {
      position: absolute;
      top: 20px;
      right: 20px;
      background: var(--gradient-primary);
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      color: white;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      box-shadow: 0 2px 10px rgba(33, 150, 243, 0.3);
    }

    .theme-toggle:hover {
      transform: rotate(180deg) scale(1.1);
      box-shadow: 0 4px 15px rgba(33, 150, 243, 0.5);
    }

    .header h1 {
      font-size: 1.8rem;
      margin-bottom: 10px;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.02); }
    }

    @media (min-width: 768px) {
      .header h1 { font-size: 2.5rem; }
    }

    .header p {
      font-size: 1rem;
      color: var(--text-secondary);
      max-width: 600px;
      margin: 0 auto;
    }

    @media (min-width: 768px) {
      .header p { font-size: 1.1rem; }
    }

    .search-box {
      background: var(--bg-card);
      border-radius: 15px;
      padding: 20px 15px;
      margin-bottom: 25px;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--border-color);
      animation: slideUp 0.6s ease-out 0.2s both;
    }

    @keyframes slideUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (min-width: 768px) {
      .search-box {
        padding: 30px;
        margin-bottom: 30px;
      }
    }

    .search-form {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      align-items: center;
      justify-content: center;
    }

    .search-form label {
      font-size: 1.1rem;
      font-weight: 500;
      color: var(--text-primary);
    }

    @media (min-width: 768px) {
      .search-form label { font-size: 1.2rem; }
    }

    .input-wrapper {
      position: relative;
      width: 100%;
      max-width: 200px;
    }

    .search-form input {
      padding: 12px 20px;
      border: 2px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-card);
      color: var(--text-primary);
      font-size: 1rem;
      width: 100%;
      transition: var(--transition);
    }

    .search-form input:focus {
      outline: none;
      border-color: #2196F3;
      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
      transform: translateY(-2px);
    }

    .search-form button {
      padding: 12px 25px;
      background: var(--gradient-primary);
      border: none;
      border-radius: 8px;
      color: white;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }

    .search-form button::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }

    .search-form button:hover::before {
      width: 300px;
      height: 300px;
    }

    .search-form button:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4);
    }

    .search-form button span {
      position: relative;
      z-index: 1;
    }

    .history-container {
      margin-top: 15px;
      text-align: center;
    }

    .history-title {
      font-size: 0.9rem;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }

    .history-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
    }

    .history-chip {
      padding: 6px 12px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      font-size: 0.85rem;
      cursor: pointer;
      transition: var(--transition);
      color: var(--text-primary);
    }

    .history-chip:hover {
      background: var(--gradient-primary);
      color: white;
      border-color: transparent;
      transform: translateY(-2px);
    }

    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9998;
      backdrop-filter: blur(5px);
    }

    .loading-overlay.active {
      display: flex;
    }

    .loading-content {
      text-align: center;
      color: white;
    }

    .loading-spinner {
      width: 60px;
      height: 60px;
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-top-color: #2196F3;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 20px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .loading-text {
      font-size: 1.2rem;
      margin-bottom: 10px;
    }

    .loading-progress {
      font-size: 0.9rem;
      opacity: 0.8;
    }

    .error {
      background: #ffe6e6;
      border-left: 4px solid var(--negative);
      padding: 15px 20px;
      border-radius: 8px;
      margin: 20px 0;
      font-weight: 500;
      color: #c62828;
      display: flex;
      align-items: center;
      gap: 10px;
      animation: shake 0.5s ease-in-out;
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-10px); }
      75% { transform: translateX(10px); }
    }

    [data-theme="dark"] .error {
      background: rgba(244, 67, 54, 0.2);
      color: #ff6b6b;
    }

    .error-actions {
      margin-top: 10px;
    }

    .retry-btn {
      padding: 8px 16px;
      background: var(--negative);
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: var(--transition);
      font-size: 0.9rem;
    }

    .retry-btn:hover {
      background: #d32f2f;
      transform: translateY(-2px);
    }

    .result-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      margin-top: 25px;
      animation: fadeIn 0.8s ease-out 0.3s both;
    }

    @media (min-width: 900px) {
      .result-container {
        grid-template-columns: 2fr 1fr;
        gap: 30px;
        margin-top: 30px;
      }
    }

    .chart-container {
      background: var(--bg-card);
      border-radius: 15px;
      padding: 20px 15px;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--border-color);
      transition: var(--transition);
    }

    .chart-container:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-3px);
    }

    @media (min-width: 768px) {
      .chart-container { padding: 25px; }
    }

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      flex-wrap: wrap;
      gap: 10px;
    }

    .chart-header h2 {
      font-size: 1.3rem;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text-primary);
    }

    @media (min-width: 768px) {
      .chart-header h2 { font-size: 1.5rem; }
    }

    .chart-actions {
      display: flex;
      gap: 10px;
    }

    .chart-container img {
      width: 100%;
      border-radius: 10px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      transition: var(--transition);
    }

    .chart-container img:hover {
      transform: scale(1.02);
    }

    .skeleton {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: loading 1.5s ease-in-out infinite;
      border-radius: 10px;
      height: 400px;
    }

    @keyframes loading {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    .analysis-container {
      background: var(--bg-card);
      border-radius: 15px;
      padding: 20px 15px;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--border-color);
      transition: var(--transition);
    }

    .analysis-container:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-3px);
    }

    @media (min-width: 768px) {
      .analysis-container { padding: 25px; }
    }

    .analysis-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .analysis-header h2 {
      font-size: 1.3rem;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text-primary);
    }

    @media (min-width: 768px) {
      .analysis-header h2 { font-size: 1.5rem; }
    }

    .analysis-content {
      background: var(--bg-primary);
      border-radius: 10px;
      padding: 20px 15px;
      font-family: 'Courier New', monospace;
      line-height: 1.8;
      white-space: pre-wrap;
      border: 1px solid var(--border-color);
      color: var(--text-primary);
    }

    @media (min-width: 768px) {
      .analysis-content { padding: 20px; }
    }

    .confidence-badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 0.85rem;
      font-weight: 500;
      margin-left: 10px;
    }

    .confidence-high {
      background: rgba(76, 175, 80, 0.2);
      color: var(--positive);
    }

    .confidence-medium {
      background: rgba(255, 193, 7, 0.2);
      color: var(--neutral);
    }

    .confidence-low {
      background: rgba(244, 67, 54, 0.2);
      color: var(--negative);
    }

    .data-source {
      margin-top: 15px;
      padding: 10px;
      background: var(--bg-primary);
      border-radius: 8px;
      font-size: 0.85rem;
      color: var(--text-secondary);
      border-left: 3px solid #2196F3;
    }

    .help-section {
      margin-top: 20px;
      border-top: 1px solid var(--border-color);
      padding-top: 15px;
    }

    .help-toggle {
      background: none;
      border: none;
      color: #2196F3;
      cursor: pointer;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 0;
      transition: var(--transition);
    }

    .help-toggle:hover {
      color: #1976D2;
    }

    .help-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      margin-top: 10px;
      font-size: 0.9rem;
      line-height: 1.6;
      color: var(--text-secondary);
    }

    .help-content.expanded {
      max-height: 500px;
    }

    .market-info {
      display: grid;
      grid-template-columns: 1fr;
      gap: 15px;
      margin-top: 25px;
    }

    @media (min-width: 600px) {
      .market-info {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
    }

    @media (min-width: 900px) {
      .market-info {
        grid-template-columns: repeat(4, 1fr);
        margin-top: 30px;
      }
    }

    .info-card {
      background: var(--bg-card);
      border-radius: 10px;
      padding: 20px;
      text-align: center;
      transition: var(--transition);
      border: 1px solid var(--border-color);
      animation: fadeIn 0.6s ease-out;
      animation-fill-mode: both;
    }

    .info-card:nth-child(1) { animation-delay: 0.1s; }
    .info-card:nth-child(2) { animation-delay: 0.2s; }
    .info-card:nth-child(3) { animation-delay: 0.3s; }
    .info-card:nth-child(4) { animation-delay: 0.4s; }

    .info-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-lg);
    }

    .info-card i {
      font-size: 2rem;
      margin-bottom: 10px;
      background: var(--gradient-primary);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    .info-card h3 {
      font-size: 1.1rem;
      margin-bottom: 10px;
      color: var(--text-primary);
    }

    .info-card p {
      font-size: 0.9rem;
      color: var(--text-secondary);
    }

    .disclaimer {
      text-align: center;
      margin-top: 30px;
      padding: 15px;
      font-size: 0.9rem;
      color: var(--text-secondary);
      border-top: 1px solid var(--border-color);
    }

    @media (min-width: 768px) {
      .disclaimer { margin-top: 40px; }
    }

    .stock-code {
      font-weight: bold;
      color: var(--positive);
    }

    .positive { color: var(--positive); }
    .negative { color: var(--negative); }
    .neutral { color: var(--neutral); }

    .download-btn, .share-btn, .copy-btn {
      background: var(--gradient-primary);
      border: none;
      border-radius: 6px;
      color: white;
      padding: 8px 12px;
      cursor: pointer;
      transition: var(--transition);
      font-size: 0.9rem;
    }

    .download-btn:hover, .share-btn:hover, .copy-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4);
    }

    .download-btn:active, .share-btn:active, .copy-btn:active {
      transform: translateY(0);
    }

    /* Coze悬浮球样式优化 */
    #coze-chat-bot {
      z-index: 9999 !important;
    }

    .tooltip {
      position: relative;
      display: inline-block;
    }

    .tooltip .tooltiptext {
      visibility: hidden;
      background-color: rgba(0, 0, 0, 0.8);
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 10px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      font-size: 0.85rem;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
    }

    .qr-modal {
      display: none;
      position: fixed;
      z-index: 10000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(5px);
    }

    .qr-modal-content {
      background-color: var(--bg-card);
      margin: 10% auto;
      padding: 30px;
      border-radius: 15px;
      width: 90%;
      max-width: 400px;
      text-align: center;
      box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
      animation: slideDown 0.3s ease-out;
    }

    .qr-close {
      color: var(--text-secondary);
      float: right;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
      transition: var(--transition);
    }

    .qr-close:hover {
      color: var(--text-primary);
    }

    #qrcode {
      margin: 20px auto;
      display: inline-block;
      padding: 10px;
      background: white;
      border-radius: 10px;
    }

    .keyboard-hint {
      position: fixed;
      bottom: 20px;
      left: 20px;
      background: var(--bg-card);
      padding: 10px 15px;
      border-radius: 8px;
      font-size: 0.85rem;
      color: var(--text-secondary);
      border: 1px solid var(--border-color);
      box-shadow: var(--shadow-sm);
      opacity: 0;
      animation: fadeIn 0.5s ease-in 2s forwards;
      z-index: 100;
    }

    .keyboard-hint kbd {
      background: var(--bg-primary);
      padding: 2px 6px;
      border-radius: 4px;
      font-family: monospace;
      border: 1px solid var(--border-color);
    }
  </style>
</head>
<body>
  <div class="loading-overlay" id="loadingOverlay">
    <div class="loading-content">
      <div class="loading-spinner"></div>
      <div class="loading-text">AI正在分析海量数据...</div>
      <div class="loading-progress" id="loadingProgress">预计需要 10-15 秒</div>
    </div>
  </div>

  <div class="container">
    <div class="header">
      <button class="theme-toggle" id="themeToggle" title="切换主题">
        <i class="fas fa-moon"></i>
      </button>
      <h1><i class="fas fa-chart-line"></i> LSTM股价预测系统</h1>
      <p>基于深度学习的A股市场分析与预测工具</p>
    </div>

    <div class="search-box">
      <form class="search-form" method="get" action="/predict" id="predictForm">
        <label for="code">输入股票代码：</label>
        <div class="input-wrapper">
          <input type="text" name="code" id="code" placeholder="例如：600519" value="{{ code if code else '600519' }}" required>
        </div>
        <button type="submit">
          <span><i class="fas fa-search"></i> 开始预测</span>
        </button>
      </form>

      <div class="history-container" id="historyContainer" style="display: none;">
        <div class="history-title">最近查询</div>
        <div class="history-chips" id="historyChips"></div>
      </div>
    </div>

    {% if error %}
      <div class="error">
        <i class="fas fa-exclamation-circle"></i>
        <div>
          <div>{{ error }}</div>
          <div class="error-actions">
            <button class="retry-btn" onclick="location.reload()">
              <i class="fas fa-redo"></i> 重试
            </button>
          </div>
        </div>
      </div>
    {% endif %}

    {% if img %}
      <div class="result-container">
        <div class="chart-container">
          <div class="chart-header">
            <h2>
              <i class="fas fa-chart-bar"></i> 股价预测图表
              <span class="confidence-badge confidence-medium">中等置信度</span>
            </h2>
            <div class="chart-actions">
              <span class="stock-code">{{ code }}</span>
            </div>
          </div>
          <img src="data:image/png;base64,{{ img }}" alt="股价预测图表">

          <div class="data-source">
            <i class="fas fa-info-circle"></i> 数据来源：AKShare | 更新时间：实时 | 历史数据：2015年至今
          </div>
        </div>

        <div class="analysis-container">
          <div class="analysis-header">
            <h2><i class="fas fa-file-alt"></i> 分析报告</h2>
            <div class="chart-actions">
              <button id="downloadBtn" class="download-btn tooltip" title="下载完整报告">
                <i class="fas fa-download"></i>
                <span class="tooltiptext">下载ZIP格式报告</span>
              </button>
              <button id="shareBtn" class="share-btn tooltip" title="分享结果">
                <i class="fas fa-share-alt"></i>
                <span class="tooltiptext">生成分享链接</span>
              </button>
            </div>
          </div>
          <div class="analysis-content">{{ summary }}</div>

          <div class="help-section">
            <button class="help-toggle" id="helpToggle">
              <i class="fas fa-question-circle"></i> 如何阅读此预测？
              <i class="fas fa-chevron-down" id="helpIcon"></i>
            </button>
            <div class="help-content" id="helpContent">
              <p><strong>LSTM模型说明：</strong></p>
              <p>长短期记忆网络(LSTM)是一种深度学习算法，能够学习时间序列数据中的长期依赖关系。</p>
              <p><strong>预测解读：</strong></p>
              <ul style="text-align: left; padding-left: 20px;">
                <li>涨跌幅 > 3%：上涨趋势</li>
                <li>涨跌幅 < -3%：下跌趋势</li>
                <li>涨跌幅 -3% ~ 3%：横盘震荡</li>
              </ul>
              <p><strong>风险提示：</strong>模型预测基于历史数据，实际市场受多种因素影响，请谨慎参考。</p>
            </div>
          </div>
        </div>
      </div>

      <div class="market-info">
        <div class="info-card">
          <i class="fas fa-brain"></i>
          <h3>AI预测模型</h3>
          <p>基于LSTM深度学习算法，分析历史价格模式</p>
        </div>
        <div class="info-card">
          <i class="fas fa-calendar-alt"></i>
          <h3>90天预测</h3>
          <p>提供未来三个月的股价趋势预测</p>
        </div>
        <div class="info-card">
          <i class="fas fa-database"></i>
          <h3>历史数据</h3>
          <p>使用自2015年以来的完整交易数据</p>
        </div>
        <div class="info-card">
          <i class="fas fa-chart-pie"></i>
          <h3>技术分析</h3>
          <p>结合多种技术指标进行综合判断</p>
        </div>
      </div>
    {% else %}
      <div class="market-info">
        <div class="info-card">
          <i class="fas fa-rocket"></i>
          <h3>快速开始</h3>
          <p>输入股票代码，获取AI预测结果</p>
        </div>
        <div class="info-card">
          <i class="fas fa-shield-alt"></i>
          <h3>数据安全</h3>
          <p>您的查询数据仅用于分析，不会存储</p>
        </div>
        <div class="info-card">
          <i class="fas fa-sync-alt"></i>
          <h3>实时更新</h3>
          <p>基于最新市场数据进行分析预测</p>
        </div>
        <div class="info-card">
          <i class="fas fa-cogs"></i>
          <h3>智能算法</h3>
          <p>采用先进的机器学习技术</p>
        </div>
      </div>
    {% endif %}

    <div class="disclaimer">
      <p><i class="fas fa-exclamation-triangle"></i> 免责声明：本系统提供的预测结果仅供参考，不构成投资建议。股市有风险，投资需谨慎。</p>
    </div>
  </div>

  <div class="keyboard-hint">
    提示：按 <kbd>Enter</kbd> 提交 | <kbd>ESC</kbd> 清空
  </div>

  <div id="qrModal" class="qr-modal">
    <div class="qr-modal-content">
      <span class="qr-close">&times;</span>
      <h3 style="margin-bottom: 20px; color: var(--text-primary);">扫码分享预测结果</h3>
      <div id="qrcode"></div>
      <p style="color: var(--text-secondary); font-size: 0.9rem; margin-top: 15px;">
        或复制链接：
      </p>
      <div style="display: flex; gap: 10px; margin-top: 10px;">
        <input type="text" id="shareLink" readonly style="flex: 1; padding: 8px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary);">
        <button class="copy-btn" id="copyLinkBtn">
          <i class="fas fa-copy"></i> 复制
        </button>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  <script>
    // 主题切换功能
    const themeToggle = document.getElementById('themeToggle');
    const html = document.documentElement;
    let currentTheme = 'light';

    // 从内存读取主题设置
    if (window.themePreference) {
      currentTheme = window.themePreference;
      html.setAttribute('data-theme', currentTheme);
      updateThemeIcon();
    }

    themeToggle.addEventListener('click', function() {
      currentTheme = currentTheme === 'light' ? 'dark' : 'light';
      html.setAttribute('data-theme', currentTheme);
      window.themePreference = currentTheme; // 存储到内存
      updateThemeIcon();
    });

    function updateThemeIcon() {
      const icon = themeToggle.querySelector('i');
      icon.className = currentTheme === 'light' ? 'fas fa-moon' : 'fas fa-sun';
    }

    // 搜索历史管理
    let searchHistory = window.stockSearchHistory || [];

    function addToHistory(code) {
      if (!searchHistory.includes(code)) {
        searchHistory.unshift(code);
        if (searchHistory.length > 5) {
          searchHistory.pop();
        }
        window.stockSearchHistory = searchHistory;
        updateHistoryDisplay();
      }
    }

    function updateHistoryDisplay() {
      const container = document.getElementById('historyContainer');
      const chips = document.getElementById('historyChips');

      if (searchHistory.length > 0) {
        container.style.display = 'block';
        chips.innerHTML = searchHistory.map(code =>
          `<div class="history-chip" onclick="loadStock('${code}')">${code}</div>`
        ).join('');
      } else {
        container.style.display = 'none';
      }
    }

    function loadStock(code) {
      document.getElementById('code').value = code;
      document.getElementById('predictForm').submit();
    }

    // 页面加载时显示历史
    updateHistoryDisplay();

    // 表单提交处理
    const predictForm = document.getElementById('predictForm');
    const loadingOverlay = document.getElementById('loadingOverlay');
    const input = document.getElementById('code');

    if (predictForm) {
      predictForm.addEventListener('submit', function(e) {
        const code = input.value.trim();
        if (code) {
          addToHistory(code);
          loadingOverlay.classList.add('active');

          // 模拟进度更新
          let progress = 0;
          const progressTexts = [
            '正在获取历史数据...',
            '正在训练LSTM模型...',
            '正在生成预测结果...',
            '正在绘制图表...'
          ];

          const progressInterval = setInterval(() => {
            progress++;
            if (progress < progressTexts.length) {
              document.getElementById('loadingProgress').textContent = progressTexts[progress];
            }
          }, 3000);

          // 清理定时器
          setTimeout(() => clearInterval(progressInterval), 15000);
        }
      });
    }

    // 输入框焦点和验证
    if (input) {
      input.focus();
      input.addEventListener('input', function() {
        this.value = this.value.replace(/[^\d]/g, '');
      });

      // 键盘快捷键
      input.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
          this.value = '';
          this.blur();
        }
      });
    }

    // 下载功能
    const downloadBtn = document.getElementById('downloadBtn');
    if (downloadBtn) {
      downloadBtn.addEventListener('click', function() {
        const code = document.getElementById('code').value || '600519';
        const originalHTML = downloadBtn.innerHTML;
        downloadBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
        downloadBtn.disabled = true;

        fetch(`/download?code=${code}`)
          .then(response => {
            if (!response.ok) {
              throw new Error('下载失败');
            }
            return response.blob();
          })
          .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = `stock_${code}_analysis_${new Date().toISOString().slice(0,19).replace(/:/g,'-')}.zip`;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
            downloadBtn.innerHTML = originalHTML;
            downloadBtn.disabled = false;
            showNotification('下载成功！', 'success');
          })
          .catch(error => {
            console.error('下载错误:', error);
            downloadBtn.innerHTML = originalHTML;
            downloadBtn.disabled = false;
            showNotification('下载失败，请重试', 'error');
          });
      });
    }

    // 分享功能
    const shareBtn = document.getElementById('shareBtn');
    const qrModal = document.getElementById('qrModal');
    const qrClose = document.querySelector('.qr-close');
    const copyLinkBtn = document.getElementById('copyLinkBtn');

    if (shareBtn) {
      shareBtn.addEventListener('click', function() {
        const code = document.getElementById('code').value || '600519';
        const shareUrl = `${window.location.origin}/predict?code=${code}`;

        document.getElementById('shareLink').value = shareUrl;
        qrModal.style.display = 'block';

        // 生成二维码
        document.getElementById('qrcode').innerHTML = '';
        new QRCode(document.getElementById('qrcode'), {
          text: shareUrl,
          width: 200,
          height: 200,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        });
      });
    }

    if (qrClose) {
      qrClose.addEventListener('click', function() {
        qrModal.style.display = 'none';
      });
    }

    if (copyLinkBtn) {
      copyLinkBtn.addEventListener('click', function() {
        const shareLink = document.getElementById('shareLink');
        shareLink.select();
        document.execCommand('copy');
        showNotification('链接已复制！', 'success');
      });
    }

    window.addEventListener('click', function(e) {
      if (e.target === qrModal) {
        qrModal.style.display = 'none';
      }
    });

    // 通知函数
    function showNotification(message, type) {
      const notification = document.createElement('div');
      notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 15px 20px;
        border-radius: 8px;
        color: white;
        font-weight: 500;
        z-index: 10000;
        transition: all 0.3s;
        animation: slideIn 0.3s ease-out;
        ${type === 'success' ? 'background: linear-gradient(90deg, #4CAF50, #45a049);' : 'background: linear-gradient(90deg, #f44336, #d32f2f);'}
      `;
      notification.innerHTML = `<i class="fas fa-${type === 'success' ? 'check' : 'exclamation-triangle'}"></i> ${message}`;
      document.body.appendChild(notification);

      setTimeout(() => {
        notification.style.opacity = '0';
        notification.style.transform = 'translateX(100px)';
        setTimeout(() => {
          document.body.removeChild(notification);
        }, 300);
      }, 3000);
    }

    // 帮助内容展开
    const helpToggle = document.getElementById('helpToggle');
    const helpContent = document.getElementById('helpContent');
    const helpIcon = document.getElementById('helpIcon');

    if (helpToggle) {
      helpToggle.addEventListener('click', function() {
        helpContent.classList.toggle('expanded');
        helpIcon.style.transform = helpContent.classList.contains('expanded') ? 'rotate(180deg)' : 'rotate(0)';
      });
    }

    // 分析内容高亮
    const analysisContent = document.querySelector('.analysis-content');
    if (analysisContent) {
      let content = analysisContent.textContent;

      if (content.includes('上涨趋势')) {
        analysisContent.innerHTML = content.replace('上涨趋势', '<span class="positive">上涨趋势</span>');
      } else if (content.includes('下跌趋势')) {
        analysisContent.innerHTML = content.replace('下跌趋势', '<span class="negative">下跌趋势</span>');
      } else if (content.includes('横盘震荡')) {
        analysisContent.innerHTML = content.replace('横盘震荡', '<span class="neutral">横盘震荡</span>');
      }

      analysisContent.innerHTML = analysisContent.innerHTML.replace(/(\d+\.\d+%)/g, function(match) {
        if (match.includes('-')) {
          return '<span class="negative">' + match + '</span>';
        } else {
          return '<span class="positive">' + match + '</span>';
        }
      });
    }

    // 键盘快捷键提示自动隐藏
    setTimeout(() => {
      const hint = document.querySelector('.keyboard-hint');
      if (hint) {
        hint.style.opacity = '0';
        setTimeout(() => hint.remove(), 500);
      }
    }, 8000);
  </script>

  <script src="https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js"></script>
  <script>
    const cozeWebSDK = new CozeWebSDK.WebChatClient({
      config: {
        type: "bot",
        botId: "7561451679767019547",
        isIframe: false,
      },
      auth: {
        type: "token",
        token: "pat_iI9xg3JmRGN82JgqRR8QGF9yLm9h36Pz0ssbRiGONtyJjA0voT9L6BV6ZsvWHeLn",
        onRefreshToken: async () => {
          const newToken = await refreshToken();
          return newToken;
        }
      },
      userInfo: {
        id: "user_" + Date.now(),
        nickname: "Stock_user",
        url: "https://via.placeholder.com/40"
      },
      ui: {
        base: {
          icon: "https://cdn-icons-png.flaticon.com/512/3135/3135715.png",
          layout: "pc",
          zIndex: 1000,
        },
        asstBtn: {
          isNeed: true,
        },
        chatBot: {
          title: " AI 金融分析师",
          width: 460,
          uploadable: true,
          isNeedAudio: true,
        },
      },
    });
  </script>
</body>
</html>